<template>
	<div class="employee-list table-theme">
		<head-title title="用户--员工列表"></head-title>
		<el-card>
			<div class="top-menu">
				<div class="menu-left"></div>

				<div class="menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
					<search-view :option="searchOption" @value="goSearch" @clear="refreshPage" ></search-view>
					<div class="add"><el-button type="primary" @click="showDialog(2)">添加员工</el-button></div>
				</div>
			</div>
			<p style="text-align: right;line-height: 30px;">总数据数：{{total}}</p>
			<el-table :data="userList">
				<el-table-column label="序号" align="center" prop="store_admin_id"></el-table-column>
				<el-table-column label="头像" align="center" width="100">
					<template slot-scope="scope">
						<el-image :src="scope.row.heard_img" style="width: 50px; height: 50px; vertical-align: top;"></el-image>
					</template>
				</el-table-column>
				<el-table-column label="名字" align="center" prop="nickname"></el-table-column>
				<el-table-column label="电话" align="center" prop="phone"></el-table-column>
				<el-table-column label="类型" align="center" prop="typeName"></el-table-column>
				<el-table-column label="商家ID" align="center" prop="store_id"></el-table-column>
				<el-table-column label="用户ID" align="center" prop="user_id"></el-table-column>
				<el-table-column label="时间" align="center" prop="add_time" width="180px"></el-table-column>
				<el-table-column label="利润" align="center" prop="royalty"></el-table-column>
				<el-table-column label="上下架" align="center">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2" @change="upDown($event, scope.row.store_admin_id)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" width="180">
					<template slot-scope="scope">
						<el-button type="danger" size="mini" @click="del(scope.row.store_admin_id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages"><el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination></div>
		</el-card>

		<!-- 添加用户信息弹框 -->
		<el-dialog title="添加员工" :visible.sync="addUserDialog" width="500px" center :modal-append-to-body="false">
			<el-form :model="addUserForm" :rules="addUserFormRules" ref="addUserForm" label-width="120px">
				<div class="user-info">
					<div class="info-exhibition">
						<el-form-item label="用户ID:" prop="user_id"><el-input v-model="addUserForm.user_id" placeholder="请输入用户ID" clearable></el-input></el-form-item>
						<el-form-item label="提成:" prop="royalty"><el-input v-model="addUserForm.royalty" placeholder="请输入(0~100)" clearable></el-input></el-form-item>
						<el-form-item label="上下架:" prop="status">
							<el-select v-model="addUserForm.status" placeholder="请选择">
								<el-option label="上架" value="1"></el-option>
								<el-option label="下架" value="2"></el-option>
							</el-select>
						</el-form-item>
					<el-form-item label="身份" prop="type">
						<el-select v-model="addUserForm.type" placeholder="请选择">
							<el-option v-for="(item,index) in roleList" :key="index" :label="item.name" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					</div>
				</div>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addUserDialog = false">取 消</el-button>
				<el-button type="primary" @click="addUserClick('addUserForm')">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	name: 'employee_list',
	data() {
		return {
			roleList:[
				{
					name:'业务员',
					value:2
				},
				{
					name:'财务',
					value:3
				},
				{
					name:'分销商',
					value:4
				},
				{
					name:'设计师',
					value:6
				}
			],
			admin_type: localStorage.getItem('admin_type'),
			admin_id: localStorage.getItem('admin_id'),
			imageUrl: '',
			selectContent: '', // 分类搜索平输入框的值
			classSelect: 0, // 分类搜索
			userInfoForm: {
				belong_refer: '',
				user_id: '',
				phone: '',
				user_B_id: '',
				type:''
			}, // 要更改的用户信息
			addUserForm: {
				user_id: '',
				royalty: '',
				status: '1',
				type:''
			}, // 添加用户的信息
			addUserFormRules: {
				user_id: [{ required: true, message: '请输入用户ID' }],
				royalty: [{ required: true, message: '请输入(0~100)' }],
				status: [{ required: true, message: '请选择上下架' }],
				type: [{ required: true, message: '请选择身份' }]
			},
			addUserDialog: false, // 添加用户弹框
			userList: [], // 用户列表
			total: 0,totalData: 0, 
			page: 0,
			searchOption: [	
				{ value: 0, label: '用户ID' },
				{ value: 1, label: '电话' },
			],
			store_id:''
		};
	},
	methods: {
		// 初始化列表
		init(e) {
			this.page = e;
			let data = {
				page: e - 1 ? e - 1 : 0,
				limit: 10,
				store_id:this.store_id
			};
			if (this.classSelect == 0) {
				data.user_id = this.selectContent;
			} else if (this.classSelect == 1) {
				data.phone = this.selectContent;
			}
			
			this.$http(this.$ApiList.StaffList, data).then(res => {
				this.userList = res.datas.data
				this.total = res.datas.count;
			});
		},
		// 删除
		del(id) {
			console.log('user-id', id);
			this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					let data = {
						store_admin_id: id
					};
					this.$http(this.$ApiList.DelStaff, data).then(res => {
							this.$message({
								message: '删除成功',
								type: 'success'
							});
							this.refreshPage();
					});
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
		},
		// 上下架
		upDown(e, id) {
			let data = {
					store_admin_id: id,
					status: e
				};
			this.$http(this.$ApiList.StaffDown, data).then(res => {
					this.$layer.msg('操作成功');
			});
			this.page = 1;
			this.init();
		},
		
		// 控制Dialog显示
		showDialog(type) {
			if (type == 2) {
				this.addUserDialog = true;
			}
		},
		goSearch(classSelect, selectContent) {
			this.classSelect = classSelect;
			this.selectContent = selectContent;
			this.init();
		},
		addUserClick(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					this.addUserForm.store_id = this.store_id; 
				this.$http(this.$ApiList.addRoleWorker, this.addUserForm).then(res => {
						this.$layer.msg('提交成功');
						this.addUserDialog = false;
						this.init()
				});
				} else {
					this.$layer.msg('请填写完整信息后提交');
				}
			});
		},
		refreshPage() {
			this.page = 1;
			this.classSelect = 0;
			this.selectContent = '';
			this.init()
		},
	},
	created() {
		this.store_id = this.$route.query.store_id?this.$route.query.store_id:localStorage.getItem('store_id')
		this.init();
	},
	watch: {
		'$route':function(val){
			this.store_id = this.$route.query.store_id?this.$route.query.store_id:localStorage.getItem('store_id')
			this.init();
		}
	}
};
</script>
<style lang="scss" scoped>
.user-info .el-avatar {
	display: block;
	margin: 0 auto;
}
.info-exhibition {
	margin-top: 20px;
}
.info-exhibition p {
	text-align: center;
	line-height: 30px;
	margin-bottom: 0;
}
</style>
